<template>
	<view class="container">
		<header class="box">
			<view style="height: 10px"></view>
			<img src="../../static/head.png" alt="Head Image" class="head-image" />
			<view style="height: 10px"></view>
		</header>
		<main>
			<view class="tab-content box">
				<view v-if="dataArray.length==0" class="nodata">
					暂无数据～
				</view>
				<view class="items" >
					<view v-for="(item, index) in dataArray" :key="index" class="item">
						<view class="image-container">
							<img :src="item.pic" :alt="item.name" />
						</view>
						<view class="bott">
							<view class="text-container">
								<view class="ellipsis">{{ item.name }}</view>
								<view class="red">
									<img src="../../static/hot0.png" alt="hot" width="12px" height="12px" />
									<text>券包活动价￥{{ item.price||'--' }}</text>
								</view>
							</view>
							<view class="button-container">
								<wx-open-launch-weapp v-if="isWx" id="launch-btn" :username="item.ghAppid"
									:path="item.actUrlMp">
									<script type="text/wxtag-template">
										<img src="https://tp.juzicps.com/juzicps/images/20230828/1693210521661_jup.png"  alt="跳转" width="30px" height="30px"  />
									</script>
								</wx-open-launch-weapp>
								<a :href="item.actUrl" target="_blank" v-if="!isWx">
									<img src="../../static/jup.png" alt="跳转" width="30px" height="30px" />
								</a>
							</view>
						</view>
					</view>
				</view>
			</view>
		</main>
	</view>
</template>

<script>
	import {
		queryStringToObject
	} from '../../utils/eleutil.js'
	import {
		inspectEle,
		getMtSuperValue
	} from "@/api/userchannel.js";

	export default {
		data() {
			return {
				activeTab: 0,
				appid: "wxece3a9a4c82f58c9",
				sid: "dce18a4536824ac09bb3d8aa19b48a71",
				dataArray: [],
				subType: 3 //subType = 2 天天领红包 subType = 3 限时会场
			};
		},
		computed: {
			isWx() {
				return this.$wechat && this.$wechat.isWechat()
			}
		},
		mounted() {
			const url = window.location.href;
			//分享
			if (this.$wechat && this.$wechat.isWechat()) {
				this.$wechat.share({
					title: '美团超值券包',
					desc: "超值券包囤美味，您有一个外卖红包待领取，最高20元！",
					img: 'https://tp.juzicps.com/juzicps/images/20230328/1679968214697_221.jpg'
				}, url);
			}

			const params = queryStringToObject(window.location.href);
			console.info('params======>' + params.sid)
			this.sid = params.sid
			if (this.sid) {
				this.inspect(this.sid)
			} else {
				uni.showToast({
					title: '参数不完整!',
					icon: 'none',
					duration: 2000
				});
			}

			this.init();
		},
		methods: {
			init() {
				getMtSuperValue(this.sid, this.subType).then((res) => {
					if (res.code == 200) {
						this.dataArray = res?.data;
					}
				});
			},
			inspect(sid) {
				inspectEle(sid).then((res) => {
					if (res.code == 200) {
						if (!res.data) {
							console.log("获取SID失败");
							uni.showToast({
								title: 'sid无效!',
								icon: 'none',
								duration: 2000
							});
						}
						console.log("获取SID", res.data);
					} else {
						console.log("获取SID失败");
						uni.showToast({
							title: 'code无效!',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			setActiveTab(index) {
				this.activeTab = index;
			}
		},
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100%;
		background-color: #F7F7FA;
	}

	header {
		height: 110px;
	}

	.head-image {
		width: 100%;
		object-fit: cover;
		border-radius: 20px;
	}

	nav {
		height: 40px;
		background-color: #eaeaea;
	}
	.box {
		width: 96vw;
		margin: 0 2vw;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100%;
		list-style: none;
		list-style-type: none;
		padding: 0;
		margin-bottom: 10px;
		background-color: #fff;
		border-radius: 10px;
	}

	.tabs li {
		display: inline-block;
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
		cursor: pointer;
		font-size: 14px;
		font-weight: 700;
	}

	.tabs li.active {
		position: relative;
		color: #2a82e4;
		box-shadow: 0 1px 5px #2a82e4;

		/*box-shadow: inset 0 0 5px #2a82e4, 0 2px 5px #2a82e4;*/
	}

	.tabs li.noactive::after {
		content: "";
		background-color: rgba(229, 229, 229, 1);
		/* 滑块的颜色 */
		height: 2px;
		width: 25px;
		position: absolute;
		bottom: 6px;
		left: calc(50% - 12.5px);
		/* 将滑块居中 */
	}

	.tabs li.active::after {
		background-color: #2a82e4 !important;
		/* 滑块的颜色 */
	}

	main {
		flex-grow: 1;
	}

	.tab-content {
		height: calc(100vh - 110px);
		overflow-y: scroll;
	}


	.bott {
		justify-content: space-between;
		display: flex;
	}
	.items{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.item {
		height: 150px;
		margin-bottom: 10px;
		padding: 0 3px;
		flex-basis: 46%; 
		background-color: #fff;
		border-radius: 10px;
		position: relative;
	}

	.image-container {
		height: 94px;
	}

	.image-container img {
		height: 100%;
		border-radius: 10px;
		width: auto;
	}

	.ellipsis {
		max-width: 38vw;
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.text-container {
		font-size: 12px;
		font-weight: 700;
		padding: 4px 0;
	}

	.red {
		display: flex;
		/* 使用Flex布局 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		margin: 5px 0;
		font-size: 10px;
		font-weight: 700;
		color: rgba(255, 255, 255, 1);
		width: 124px;
		height: 20px;
		border-radius: 30px;
		background: linear-gradient(180deg, #fe7429 0%, #ff370e 100%);
	}

	.red img {
		vertical-align: auto;
		margin: 0 2px;
	}

	.button-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.gray {
		height: 19px;
		border-radius: 30px;
		background: rgba(204, 204, 204, 1);
		padding: 1px 7px;
		position: absolute;
		top: 30%;
		/* left: 50%; */
		transform: translate(6%, -30%);
	}

	.gray img {
		vertical-align: center;
	}

	.gray-text {
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0px;
		line-height: 20px;
		color: rgba(128, 128, 128, 1);
		text-align: left;
		vertical-align: top;
	}

	.nodata {
		width: 100%;
		color: gray;
		text-align: center;
		line-height: 100px;
	}
</style>